import { Route, Routes, useParams } from "react-router-dom";
// import Home from "./home";
import PageLayout from "@/layout/pageLayout";
// import About from "./about";
// import Category from "./category";
// import Banner from "./banner";
// import TableInfo from "./tableInfo";
// import Detail from "./tableInfo/detail";
// import Login from "./login";
// import NoFound from "./404";
// import Register from "./register";
// const PageLayout = lazy(() => import(/* webpackChunkName: "pageLayout" */ '@/layout/pageLayout'))
const Home = lazy(() => import(/* webpackChunkName: "home" */ './home'))
const Login = lazy(() => import(/* webpackChunkName: "login" */ './login'))
const NoFound = lazy(() => import(/* webpackChunkName: "404" */ './404'))
const Register = lazy(() => import(/* webpackChunkName: "register" */ './register'))
const About = lazy(() => import(/* webpackChunkName: "about" */ './about'))
const Category = lazy(() => import(/* webpackChunkName: "category" */ './category'))
const Banner = lazy(() => import(/* webpackChunkName: "banner" */ './banner'))
const TableInfo = lazy(() => import(/* webpackChunkName: "tableInfo" */ './tableInfo'))
const Detail = lazy(() => import(/* webpackChunkName: "tableInfoDetail" */ './tableInfo/detail'))
const Department = lazy(() => import(/* webpackChunkName: "department" */ './department'))

import { lazy, Suspense } from "react";
const App = () => {
    const params = useParams();
    console.log("params,",params)
    return (
        <>
            {/* <Suspense fallback={<div>Loading...</div>}> */}
                <Routes>
                    <Route path="/login" element={<Login />} />
                    <Route path="/register" element={<Register />} />
                    <Route path="/" element={<PageLayout />} >
                        <Route path="/" element={<Home />} />
                        <Route path="/about" element={<About />} />
                        <Route path="/category" element={<Category />} />
                        <Route path="/banner" element={<Banner />} />
                        <Route path="/tableInfo" element={<TableInfo />} />
                        <Route path="/tableInfo/add" element={<Detail key={"/tableInfo/add"}  />} />
                        <Route path="/tableInfo/detail/:id" element={<Detail key={"/tableInfo/detail/:id"}/>} />
                        <Route path="/department" element={<Department key={"department"}/>} />

                        <Route path="/*" element={<NoFound />} />
                    </Route>

                </Routes>
            {/* </Suspense> */}
        </>
    )
}
export default App;